<template>
  <div class="home">
    <header>
      <hry-card class="card"></hry-card>
      <md-tab-bar v-model="current" :items="items"></md-tab-bar>
    </header>
    <div class="content">
      <keep-alive>
        <component :is="currentView" ref="view"></component>
      </keep-alive>
    </div>
  </div>
</template>
<script>
import { TabBar, Tabs, TabPane } from "mand-mobile";
export default {
  name: "home",
  components: {
    hryCard: () => import("@/components/card"),
    hryMember: () => import("@/components/member"),
    hryDetail: () => import("@/components/detail"),
    [TabBar.name]: TabBar,
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane
  },
  data() {
    return {
      current: 0,
      items: [
        { name: 0, c: "hryMember", label: "直推会员" },
        { name: 1, c: "hryDetail", label: "收益明细" }
      ],
      info: {
        username: "",
        level: 1,
        all_income: 0,
        week_income: 0,
        dis_money: 0,
        push_num: 0,
        level_num: 0
      }
    };
  },
  methods: {},
  computed: {
    currentView() {
      return this.items[this.current].c;
    }
  }
};
</script>
<style scoped lang="stylus">
.home{
  background: #F2F2F2;
  box-sizing: border-box;
  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
  display: -moz-box; /* Firefox 17- */
  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex; /* Firefox 18+ */
  display: -ms-flexbox; /* IE 10 */
  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
  webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  header{
    height 550px
  }
  .content{
    background #ffffff;
    flex: auto;
    overflow: hidden;
    height: 100%;
  }
}
</style>
